<template>
  <div class="learnPath">
    <div class="btn-box">
      <el-button type="success" icon="el-icon-plus" @click="add" v-permission="['learn:add']">新增</el-button>
      <el-button type="danger" icon="el-icon-close" :disabled="multipleSelection.length === 0" v-permission="['learn:delete']" @click="del">删除</el-button>
      <el-button type="primary" icon="el-icon-check" @click="saveSort" v-permission="['learn:sort']">保存顺序</el-button>
    </div>
    <!-- 列表 -->
    <el-table :data="learnpathList" style="width: 100%;" border tooltip-effect="dark" row-key="id" v-loading='tableLoading' @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55px"></el-table-column>
      <el-table-column prop="id" label="学习路径ID" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="title" label="学习路径名称" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="online" label="状态" width="55px" align="center">
        <template slot-scope="scope">
          {{scope.row.online == '1' ? '上线' : '未上线'}}
        </template>
      </el-table-column>
      <el-table-column prop="summary" label="学习路径介绍" align="center"></el-table-column>
      <el-table-column prop="price" label="价格" align="center">
        <template slot-scope="scope">
          {{ '￥'+scope.row.price}}
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间" align="center"></el-table-column>
      <el-table-column prop="updatedAt" label="更新时间" align="center"></el-table-column>
      <el-table-column label="付费类型" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ $selectFormat['paySl'](scope.row.payMode).label }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="难度" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ $selectFormat['courseLevelSl'](scope.row.level).label }}
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div style="display:flex">
            <el-button type="text" @click="check(scope.row)" v-permission="['learn:manage']">管理</el-button>
            <el-button icon="el-icon-rank">点我拖动</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    
  </div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      // 选择
      multipleSelection:[],
      // 数据源
      learnpathList:[],
      // loading
      tableLoading:false,
    }
  },
  methods: {
    // 选择框改变
    handleSelectionChange(val){
      this.multipleSelection = val;
      // console.log(this.multipleSelection)
    },
    // 新增
    add() {
      this.$tabs.open({ name: 'LearnDetail' , query: { pid: this.id } });
    },
    // 管理
    check(row) {
      const {id} = row
      this.$tabs.open({ name: 'LearnDetail', params: { id } });
    },
    // 删除
    del(){
      this.$confirm(
        `确认删除所选的 ${this.multipleSelection.length} 条数据? 删除之后无法恢复! 请谨慎操作`,
        {
          title: '删除',
          type: 'warning',
        },
      )
      .then(() => {
        return this.$service.LearnpathDelete({
          pathIds: this.multipleSelection.map((data) => data.id).join(','),
        });
      })
      .then(() => {
        this.$message.success('删除成功');
        this.getLearnpathList();
        this.selectedData = [];
      });
    },
    // 保存顺序
    saveSort(){
      let arr = []
      this.learnpathList.map((item,index)=>{
        arr.push({
			    "id": item.id,
          "sortnum": index
        })
      })
      this.$service.LearnpathBatchUpdate(arr,JSON_HEADER).then((res) => {
        this.$message.success('保存数据源成功!');
        // 刷新数据源列表
        this.getLearnpathList();
      })
    },
    // 得到数据源
    getLearnpathList(){
      this.tableLoading = true

      this.$service.LearnpathList().then((res)=>{
        this.tableLoading = false

        this.learnpathList = res
      })
    },
    // 行拖拽
    rowDrop () {
      // 此时找到的元素是要拖拽元素的父容器
      const tbody = document.querySelector('.el-table__body-wrapper tbody');
      const _this = this;
      Sortable.create(tbody, {
        // 指定父元素下可被拖拽的子元素
        draggable: ".el-table__row",
        onEnd ({ newIndex, oldIndex }) {
          const currRow = _this.learnpathList.splice(oldIndex, 1)[0];
          _this.learnpathList.splice(newIndex, 0, currRow);
        }
      });
    },
  },
  created() {
    // 得到数据源
    this.getLearnpathList()
  },
  mounted() {
    // 行拖拽
    this.rowDrop()
  },
}
</script>
<style lang="less" scoped>
.learnPath{
  /deep/ .el-table{
    
  }
}
</style>